<template>
	<view>
		<view class="navigation">
			<view class="navigation_back" @tap="backref()">
				<uni-icons type="back" size="24" color="#333"></uni-icons>
			</view>
			<view class="navigation_title">
				外卖
			</view>
		</view>
		<view class="search_con">
			<view class="search_input">
				<image src="../../static/image/shop/search.svg" mode=""></image>
				<input type="text" placeholder="请输入商家名" placeholder-class="placeholder" v-model="searchContent">
				<text @tap="search()">搜索</text>
			</view>
			<view class="search_keywords">
				<view class="search_keywords_hd">
					<view class="search_keyword_title">
						搜索历史
					</view>
					<view class="search_keyword_delete" @tap="clearHistory()">
						<image src="../../static/image/shop/delete.svg" mode=""></image>
					</view>
				</view>
				<view class="search_keyword_list">
					<view class="search_keyword_item" v-for="(item,index) in historyList" :key="index" @tap="toShop()">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historyList:[
					{
						name:'汉堡'
					},
					{
						name:'麻辣烫'
					},
					{
						name:'炒菜'
					}
				],
				searchContent:''
			};
		},
		methods:{
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 搜索
			search(){
				uni.navigateTo({
					url:'/pages/shop/shop'
				})
			},
			// 清空历史
			clearHistory(){
				
			},
			// 点击历史记录
			toShop(){
				uni.navigateTo({
					url:'/pages/shop/shop'
				})
			}
		}
	}
</script>

<style lang="scss">
	.navigation {
		width: 100%;
		height: 150rpx;
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: relative;

		.navigation_back {
			position: absolute;
			top: 60rpx;
		}

		.navigation_title {
			color: #333;
			font-size: 36rpx;
		}
	}
	.search_con{
		padding: 0 24rpx;
		.search_input{
			position: relative;
			width: 100%;
			height: 90rpx;
			border-radius: 12rpx;
			background-color: #F4F4F4;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			image{
				width: 26rpx;
				height: 26rpx;
			}
			input{
				margin-left: 15rpx;
				width: 70%;
				font-size: 28rpx;
				color: #333;
				&.placeholder{
					color: #C3C3C3;
				}
			}
			text{
				position: absolute;
				right: 24rpx;
				font-size: 26rpx;
				color: #2588FF;
				font-weight: 700;
			}
		}
		.search_keywords{
			margin-top: 24rpx;
			.search_keywords_hd{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.search_keyword_title{
					font-size: 30rpx;
					color: #333;
					font-weight: 700;
				}
				.search_keyword_delete{
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
			.search_keyword_list{
				display: flex;
				flex-wrap: wrap;
				margin-top: 15rpx;
				.search_keyword_item{
					padding: 0 26rpx;
					height: 50rpx;
					border-radius: 50rpx;
					background-color: #F8F8F8;
					color: #666666;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 24rpx;
				}
			}
		}
	}
</style>
